/**
* Description: 组织架构级联组件
*
* Created by hrx on 2023/11/11
*/
<template>
  <div>
    <el-cascader
      placeholder="请选择组织架构"
      clearable
      filterable
      :collapse-tags="props.collapseTags"
      :show-all-levels="props.showAllLevels"
      class="cascader"
      ref="cascader"
      :options="checkManageDept"
      v-model="deptList"
      @change="cascaderChange"
      :props="{
        checkStrictly: true,
        multiple: props.multiple,
        value: 'id',
        label: 'name',
      }"
    ></el-cascader>
  </div>
</template>

<script setup lang="ts">
import {nextTick, onMounted, reactive, watch, ref} from "vue";
import {CascaderValue} from "element-plus";
import {leftTreeApi, leftTreeDTO} from "@/api/organziation";
import {diGui} from "@/utils/common";

export interface Props {
  modelValue?: any,
  multiple?: boolean,
  collapseTags?: boolean,
  showAllLevels?: boolean,
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: [],
  multiple: true,
  collapseTags: true,
  showAllLevels: true,
})

const emit = defineEmits(['update:modelValue'])

const checkManageDept = reactive<Array<any>>([])
const deptList = ref<Array<leftTreeDTO>>([])

const cascaderChange = (e: CascaderValue) => {
  emit('update:modelValue', e)
}

const getDepartmentLists = async () => {
  let res = await leftTreeApi();
  let arrayData: Array<leftTreeDTO> = [];
  arrayData = res.data.data.map((item: leftTreeDTO) => {
    item.id = item.hospitalAreaId;
    return item;
  });
  Object.assign(checkManageDept, diGui(arrayData))
}

const resetData = () => {
  deptList.value = []
  emit('update:modelValue', [])
}

defineExpose({
  resetData
})

onMounted(() => {
  nextTick(() => {
    getDepartmentLists();
  })
})

</script>

<style scoped>

</style>